<template>
  <div class="system-iotDeviceGroup-add">
    <!-- 订单审核详情 -->
    <el-dialog center v-model="isShowDialog"  width="500px" :close-on-click-modal="false"
      :destroy-on-close="true">
      <template #header>
        <div >订单审核</div>
      </template>
      <el-form ref="formRef" :model="formData" :rules="rules" label-width="90px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="申请企业：">{{ formData.companyName }}</el-form-item>
          </el-col>
         
          <el-col :span="24">
            <el-form-item label="申请城市：">{{ formData?.provinceName }}{{ formData?.cityName }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="购买数量：">{{ formData.number }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="申请时间：">{{ formData.createTimeTxt }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="联系电话：">{{ formData.phone }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属行业：">{{ formData.industry }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="订单号：">{{ formData.orderId }}</el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <template #footer>
        <div>
          <el-button class="mr30" type="danger" @click="onSubmit('REFUSE')">审核拒绝</el-button>
          <el-button type="primary" @click="onSubmit('PASS')">审核通过</el-button>
        </div>
      </template>
    </el-dialog>
    <el-image-viewer v-if="showPreview" :url-list="srcList" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" lazy
      :preview-src-list="srcList" show-progress :initial-index="initialIndex"   @close="showPreview = false"  hide-on-click-modal />
  </div>
</template>
<script lang="ts">
import { reactive, toRefs, defineComponent, ref, unref, getCurrentInstance } from 'vue';
import { ElMessageBox, ElMessage, FormInstance, UploadProps } from 'element-plus';
import { getOrderWaitApi, orderWaitAuditApi } from '@/api/auditTask/buyNumberOrder';
import { formatDateTime } from '@/utils/index'
import dictionary from "@/utils/dictionary.json"
export default defineComponent({
  name: 'staffAutonymEdit', //人员实名审核
  components: {},
  props: {
    configUserTypeData: {
      type: Array,
      default: () => []
    },
  },
  setup(props, { emit }) {
    const formRef = ref<HTMLElement | null>(null);
    const menuRef = ref();
    const state = reactive({
      loading: false,
      isShowDialog: false,
      showPreview: false,
      srcList: [],  //预览图片
      initialIndex: null,  //初始图片索引
      formData: {
       companyName:undefined,
       provinceName:undefined,
       cityName:undefined,
       number:undefined,
       createTimeTxt:undefined,
       phone:undefined,
       industry:undefined,
       orderId:undefined,
       createTime:undefined
      },
      // 表单校验
      rules: {},
    });
    // 打开弹窗
    const openDialog = (row) => {
      
      resetForm();
      const {orderId,cityName,provinceName}=row
      getOrderWaitApi({ id:orderId }).then((res: any) => {
        if (res?.data) {
          state.formData = res.data
          state.formData.createTimeTxt=formatDateTime( state.formData.createTime)
          state.formData.cityName=cityName
          state.formData.provinceName=provinceName
        }
        state.isShowDialog = true;
      })

    };
    // 关闭弹窗
    const closeDialog = () => {
      state.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    // 提交
    const onSubmit = (status) => {
      const formWrap = unref(formRef) as any;
      if (!formWrap) return;
      formWrap.validate((valid: boolean) => {
        if (valid) {
          state.loading = true;
          let obj = {
            orderId:state.formData.orderId,
            status,
          }
          orderWaitAuditApi(obj)
            .then(() => {
              ElMessage.success(`${dictionary[status]}成功`);
              closeDialog(); // 关闭弹窗
              emit('getList');
            })
            .finally(() => {
              state.loading = false;
            });
        }
      });
    };

    
    const resetForm = () => {
      state.formData = {
        companyName:undefined,
       provinceName:undefined,
       cityName:undefined,
       number:undefined,
       createTimeTxt:undefined,
       phone:undefined,
       industry:undefined,
       orderId:undefined,
       createTime:undefined
      };
    };
    return {
      menuRef,
      formRef,
      openDialog,
      closeDialog,
      onCancel,
      onSubmit,
      resetForm,
      ...toRefs(state),
    };
  },
});
</script>
<style scoped></style>
